import { Canvas, Chart, Interval, Axis, Legend } from "@antv/f2";
import { history } from "umi";
import { BOX7_NAME } from "../../constants/index";
import styles from "./boxs.css";
import { useEffect } from "react";

export function Box7({ hasTitle = true }) {
  const data = [
    { date: '2023-03-25', num: 10, name: '远程门诊' },
    { date: '2023-03-26', num: 10, name: '远程门诊' },
    { date: '2023-03-27', num: 11, name: '远程门诊' },
    { date: '2023-03-28', num: 11, name: '远程门诊' },
    { date: '2023-03-29', num: 11, name: '远程门诊' },
    { date: '2023-03-30', num: 7, name: '远程门诊' },
    { date: '2023-03-25', num: 7, name: '电子处方' },
    { date: '2023-03-26', num: 6, name: '电子处方' },
    { date: '2023-03-27', num: 10, name: '电子处方' },
    { date: '2023-03-28', num: 11, name: '电子处方' },
    { date: '2023-03-29', num: 10, name: '电子处方' },
    { date: '2023-03-30', num: 10, name: '电子处方' },
  ];
  useEffect(() => {
    const context = document.getElementById("Box7").getContext("2d");
    if (!context) return
    const { offsetWidth } = context.canvas;
    const { props } = (
      <Canvas context={context} pixelRatio={window.devicePixelRatio}>
        <Chart data={data} style={{ left: "-10px" }}>
          <Legend
            marker="square"
            itemStyle={{ width: offsetWidth / 3, justifyContent: "center" }}
          />
          <Axis
            field="date"
            style={{
              grid: { visibility: 0 },
            }}
            tickCount={3}
            formatter={(label) => label.slice(5).replace("-", ",")}
          />
          <Axis field="num" />
          <Interval
            x="date"
            y="num"
            style={{
              radius: [4, 4, 0, 0],
            }}
            color={{ field: "name", range: ["l(90) 0:#97a2a0 1:#d3a408", "l(90) 0:#126fbb 1:#2666a8"] }}
            adjust={{
              type: "dodge",
              marginRatio: 0.05, // 设置分组间柱子的间距
            }}
          />
        </Chart>
      </Canvas>
    );

    const chart = new Canvas(props);
    chart.render();
  }, []);
  return (
    <div className={styles.box}>
      {hasTitle && <div className={styles.title}>{BOX7_NAME}</div>}
      <canvas className={styles.main} id="Box7"></canvas>
    </div>
  );
}
